<template>
  <scroll-view scroll-y="true" :style="{height: contentHeight + 'px'}" class="page">
    <view class="cards">
        <view class="flex">
            <view>门头照片</view>
        </view>
        
        <view class="photos">
            <image class="addphoto" :src="path" />
        </view>
        
    </view>
    <view class="cards" v-for="type in typeList">
        <view class="flex">
            <view>{{ type.name }}</view>
        </view>
        <view class="photos">
            <view class="photo-box" >
            <image class="photo"  src="http://121.41.75.32:8002/file/static/ashPhoto.png" mode="heightFix"  @click="getphoto1(type.id)"/>
            </view>
            <view  class="combox flex" style="overflow-x: scroll;width: 440rpx;">
                <view v-for="(item,i) in currentPhotoList[type.id]" class="tu">
                    <view class="jian" @click="jian(item)">×</view>
                    <image class="addphoto" :src="item.photoUrl"/>
                </view>
            </view>
        </view>
    </view>
    <view class="cards">
        <view class="flex j-content-between">
            <view>陈列信息</view>
           
        </view>
        <view class="flex ">
            <view class="flex" style="width: 180rpx;">
                <view class="red">*</view>
                <view>{{ typeGroup?'陈列面品项':'品牌' }}</view>
            </view>
            <w-select
                    v-if="typeGroup"
                    class="combox"
                    :text="goodsName"
                    filterable
                    showClose
                    defaultValue="请选择陈列面品项"
                    :list='goodslist' width="100%"
                    border="none"
                    @change="change"
                    keyName='goodsId'
                    valueName="goodsName"
                    @refresh="refresh"/>
            <w-select  v-if="!typeGroup"
                       class="combox"
                       filterable
                       showClose
                       defaultValue="请选择品牌"
                       :list='brandList'
                       :text="goodsName"
                       border="none"
                       width="100%"
                       @change="$event=>change({goodsId:$event.id || 0,goodsName:$event.name || '无'})"
                       keyName='id'
                       valueName="name"
           />

        </view>

        <view class="flex ">
            <view style="width: 180rpx;padding-left: 20rpx">小结</view>
            <input class="combox"  ref="inputRef"  placeholder="请输入小结"  v-model="form[goodsId].remark" @change="setRemark"/>
        </view>
        
    </view>
    <!-- 有图片的商品 -->
    <view class="check">
        <view class="check-box" v-for="item in list" :key="item.id" @click="checked(item)">
             <view class="checkeds">
                 <span :style="{color:item.id===goodsId?'red':''}">{{item.label}}</span>
             </view>
        </view>
    </view>
    <button class="save" @click="submit">保存</button>
  </scroll-view>
</template>

<script>
import { debounce, getScreen,saveImage} from "../../../service/auth";
import { basGoodsListForAdd,getBasGoodsBrandS} from "../../../service/api/shopping";
import WSelect from "@/components/w-select/w-select";
import {
    addOrSavePhoto1,
    removePhoto1,
    getPhotos,
    doorwayPhotoUrl,
    usedPhoto,
    photoGroup
} from "../../../service/api/delivery";
export default {
    components: {
        WSelect
  },
data() {
    return {
        customerId:0,
        height:'600rpx',
        contentHeight:0,
        path:'',
        paths:[],
        goodsId:0,
        goodsName:'',
        goodslist:[],
        typeList:[
            {id:1,name:'地堆'},
            {id:2,name:'冰冻'},
            {id:3,name:'常规陈列'},
            {id:4,name:'大排面'},
            {id:5,name:'核心店'},
            {id:0,name:''},
        ],
        currentPhotoList:{
            0:[],
            1:[],
            2:[],
            3:[],
            4:[],
            5:[]
        },
        id:'',
        brandList:[],
        page:1,
        size:20,
        brandName:"",
        remark:'',
        nowImageList:[],
        form:{},
        visited:{},
        upRemark: false,
        date:{},
        indexGoods:{},
        checkkey:'',
        list:[],
        typeGroup:0,
    }
},
onLoad(option) {
    this.customerId = option.customerId
    doorwayPhotoUrl({customerId:this.customerId}).then(res=>{
        this.path=res.data.doorwayPhotoUrl
    })
    this.change({goodsId:0,goodsName:'无'})
},
created() {
    const {width,height} = getScreen()
    this.contentHeight = height
    // const app = getApp()
    // this.visited = app.globalData.customerVisitRecord
    // console.log(this.visited,'客户');
    photoGroup().then(res=>
        {
            this.typeGroup = res.data
            if (this.typeGroup){
                this.getgoods()
            }else {
                getBasGoodsBrandS({size:999}).then(res=>{
                }).catch(err=>{
                    this.brandList = err.content
                    setTimeout(()=>{
                        for(let i of err.content){
                            this.indexGoods[i.id] = i.name
                        }
                    })
                })
            }
        }
    )

  },
  onShow(){
        this.usedPhoto()
  },

  watch:{
    id(n,o){
        this.id=n
    },
  },
  methods: {
      usedPhoto(){
          usedPhoto({customerId:this.customerId}).then(res=>{
              this.list=res.data
          })
      },
      checked(obj){
          if (this.form[obj.id]){
              this.goodsId = obj.id
              this.goodsName = obj.label
              this.nowImageList = this.form[obj.id].photoList
              this.getCurrentPhotoList()
          }else {
              this.change({goodsId:obj.id,goodsName:obj.label})
          }

      },
    jian(i){
        console.log(i)
        const index = this.nowImageList.findIndex(item=>item === i)
        if (i.id)removePhoto1([i.id]).then(res=>{this.usedPhoto()})
        this.nowImageList.splice(index,1)
        this.getCurrentPhotoList()
    },
    setRemark(e){
        for(let i of this.form[this.goodsId].photoList){
            i.remark = this.form[this.goodsId].remark
        }
        this.form[this.goodsId].isSave = false
    },
      getCurTime(){
          var now = new Date();

          var year = now.getFullYear();
          var month = now.getMonth() + 1; // 返回值从0开始，所以需要加1
          month = month < 10 ? '0' + month : month;
          var day = now.getDate();
          day = day < 10 ? '0' + day : day;
          var hours = now.getHours();
          hours = hours < 10 ? '0' + hours : hours;
          var minutes = now.getMinutes();
          minutes = minutes < 10 ? '0' + minutes : minutes;
          var seconds = now.getSeconds();
          seconds = seconds < 10 ? '0' + seconds : seconds;

          return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      },
    getphoto1(typeId){
        const _this = this
        uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['camera'],
        success: function (res) {
        saveImage(res.tempFilePaths[0]).then(res=>{
        if (_this.goodsId === null)return uni.showToast({title:'请先选择陈列面品项',icon:'none'})
            const data = {
                type:typeId,
                photoUrl: res,
                shootTime:_this.getCurTime()
            }
        data[`${_this.typeGroup?'goodsId':'goodsBrandId'}`] = _this.goodsId
        _this.nowImageList.push(data)
        _this.getCurrentPhotoList()
        _this.form[_this.goodsId].isSave = false
        })
    }
    })
    },
    getgoods(){
        const data={
            size:this.size,
            page:this.page,
            goodsId:this.id,
        }
        basGoodsListForAdd(data).then(res=>{}).catch(err=>{
            this.goodslist=this.goodslist.concat(err.content)
            setTimeout(()=>{
            for(let i of err.content){
                this.indexGoods[i.goodsId] = i.goodsName
            }
            })
        })
        
    },
      getCurrentPhotoList(){
        for (let i = 0;i<6;i++){
            const list = this.nowImageList.filter(item=>item.type === i)
            this.currentPhotoList[i]= list
        }
      },
    change(e){
            if(e){
                this.goodsId = e.goodsId
                this.goodsName = e.goodsName
            }else {
                this.goodsId = 0
                this.goodsName = '无'
            }
            const goods = this.form[e.goodsId]
            if (!goods) {
                const data = {customerId:this.customerId}
                data[`${this.typeGroup?'goodsId':'goodsBrandIds'}`] = this.goodsId
            getPhotos(data).then(res=>{
                if (res.status === 200) {
                    this.form[e.goodsId]={photoList:res.data.photoList}
                    this.form[e.goodsId].isSave = true
                    this.form[e.goodsId].remark = ''
                    this.nowImageList = this.form[e.goodsId].photoList
                    this.getCurrentPhotoList()
                }else {
            uni.showToast({title:res.msg,icon:'none'})
          }
            }).catch(err=>{
          uni.showToast({title:err.msg,icon:'none'})
        })
        }else{
            this.nowImageList =  this.form[e.goodsId].photoList
            this.getCurrentPhotoList()
            }
        },
    refresh(){
        this.page++
        this.getgoods()
    },
    submit(){
        if (this.goodsId === null)return uni.showToast({title:'请先选择陈列面品项'})
        const keys = Object.keys(this.form)
        this.save(keys)
    },
    save(keys){
      const key = keys.pop()
       if (!key){
        uni.hideLoading()
        // uni.showToast({title:'保存成功',icon:'none'})
        uni.navigateBack()
        return this.usedPhoto()
      }
      if (this.form[key].isSave)return this.save(keys)
      const data ={
        customerId:this.customerId,
        photoList: this.form[key].photoList
      }
      addOrSavePhoto1(data).then(res=>{
        // this.form[key].photoList = res.data.photoList
        this.form[key].photoList = res.data.photoList
        this.nowImageList = this.form[key].photoList
        this.form[key].isSave = true
        setTimeout(()=>{
          this.save(keys)
        },300)
    }).catch(e=>{
        console.log(e)
        uni.hideLoading()
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page{
    background-color: #f5f5f5;
    .save{
        position: fixed;
        z-index: 999;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        background-color: rgb(87, 87, 197);
    }
    .cards{
        background-color: white;
        margin: 20rpx 0;
        padding: 20rpx;
		flex-shrink: 0;
        .flex{
            display: flex;
            align-items: center;
            margin: 20rpx 0;
            .red{
                color: red;
                margin-right: 10rpx;
            }
            .btn{
                border: 2px solid #bab7b7;
                padding: 5rpx;
                font-size: 20rpx;
            }
        }
        .combox{
            flex-shrink: 0;
            flex-grow: 1;
            margin-left: 20rpx;
            .tu{
                position: relative;
                .jian{
                    line-height: 28rpx;
                    position: absolute;
                    right: 0;
                    font-weight: bold;
                    background: rgba(203, 203, 203, 0.8);
                    width: 35rpx;
                    height: 35rpx;
                    font-size: 30rpx;
                    border-radius: 35rpx;
                    color: #ffffff;
                    text-align: center;
                }
            }
        }
        .photos{
            display: flex;
            align-items: center;
            .photo-box{
            margin: 20rpx;
            width: 200rpx;
            height: 200rpx;
            border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, cyan 100%);
            border-image-slice: 1;
            border-width: 1px;
            border-style: solid;
            border-image-outset: 1rpx;
           .photo{
            width: 200rpx;
            height: 200rpx;
        } 
        }
        .addphoto{
            width: 200rpx;
            height: 200rpx;
            // border: 1rpx solid red;
            margin: 10rpx;

        }
        }
        
        
    }
}
.check{
    display: flex;
    flex-wrap: wrap;
    height: 260rpx;
    overflow: auto;
    background-color: white;
    .check-box{
        margin: 10rpx;
        // background-color: #F6F6F7;
    //     width: 30%;
    // height: 100rpx;
        // .checkeds{
        //     width: 30%;
        //     height: 100rpx;
// }
    }
}

.current{
  background: rgba(250,0,0,0.2)!important;
}
</style>